<template>
	<el-container>
		<!-- 侧边栏 -->
		<el-aside v-bind:class="asideClass">
			<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
				active-text-color="#ffd04b" :collapse="isCollapse" router>
				<NavSubMenu v-for="item in menuList" :subMenuData="item" :key="item.code"></NavSubMenu>
			</el-menu>
		</el-aside>
		<!-- 主要区域 -->
		<el-container>
			<el-header style="text-align: right; font-size: 12px;height: 45px;">
				<el-row type="flex" class="row-bg" justify="space-between">
					<el-col :span="1" style="margin-left: -10px;width: 20px;">
						<div class="grid-content bg-purple">
							<i :class="collapseIcon" style="font-size:xx-large;" v-on:click="menuCollapse()"></i>
						</div>

					</el-col>
					<el-col :span="2" style="margin-left:-80px;width: 36px;margin-top: -6px;color:#9494b9;">
						<div class="grid-content bg-purple">
							<i style="font-size:large;line-height: 1;cursor: pointer;" @click="toHome()">首页</i>
						</div>
					</el-col>
					<el-col :span="21">
						<div class="grid-content bg-purple-light">
							<el-dropdown @command="handleCommand">
								<i class="el-icon-setting" style="margin-right: 15px"></i>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="a">查看</el-dropdown-item>
									<el-dropdown-item command="b">退出</el-dropdown-item>
									<el-dropdown-item command="c">重置密码</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<span>joshua</span>
						</div>
					</el-col>

				</el-row>
			</el-header>

			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
import NavSubMenu from "../components/NavSubMenu/index.vue";
import Cookies from 'js-cookie';
export default {
	mounted() {
		const permissions = Cookies.get("_PERMISSIONS");

		this.menuList = JSON.parse(permissions)
	},
	methods: {
		menuCollapse: function () {

			this.isCollapse = !this.isCollapse

		},
		toHome: function () {

			if ('/home' != this.$router.currentRoute.path) {
				this.$router.push('/home');
			}

		},
		logout: function () {
			this.$router.push('/login');
		},
		handleCommand: function (command) {
			const url = "https://vue.ruoyi.vip/prod-api/login";
			//发送请求
			this.axios
				.post(url, {
					//携带参数
					params: {
						username: 'fjeioeoe',
						password: "jfieoeijfeio",
					},
				})
				.then((res) => {
					console.log(res.data);

				})
				.catch((error) => {
					console.log(error);
					//出现错误使用ElementUI提供的消息提示
					this.$message.error("对不起! 登录错误");
				});
			console.log("command:" + command)
		}
	},
	data() {
		return {
			isCollapse: false,
			// collapseIcon:'el-icon-s-fold',
			menuList: []
		}
	},
	computed: { //计算属性

		asideClass: function () { //如果collapsed属性为true就展开不样式 反之就展开样式
			return this.isCollapse ? "main-aside-collapsed" : "main-aside";
		},
		collapseIcon: function () {
			return this.isCollapse ? "el-icon-s-fold" : "el-icon-s-unfold";
		}
	},
	components: {
		NavSubMenu
	}
};
</script>
<style scoped>
.el-container {
	height: 725px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
	text-align: justify;
}

.main-aside {
	/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
	width: 200px !important;
	/* height: 100%;
    background-color: #334157;
    margin: 0px; */
}

.main-aside-collapsed {
	/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
	width: 64px !important;
	/* height: 100%;
    background-color: #334157;
    margin: 0px; */
}

.el-header {
	color: #333;
	line-height: 60px;
}

.el-footer {
	background-color: #b3c0d1;
	color: #333;
	text-align: center;
	line-height: 60px;
}

.el-aside {
	background-color: #545c64;
	color: #333;
	text-align: center;
	line-height: 200px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
}

.el-main {
	background-color: #e9eef3;
	color: #333;
}
</style>
